<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>万表网登录</title>
		<link rel="stylesheet" href="css/signin.css" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/common.css" />
		<script src="js/signin.js"></script>
	</head>
	<body>
		<!-- 导航部分 -->
		<div class="nav">
			<div class="w">
				<ul class="nav_left fl">
					<li>
						<a href="#">正品保障，免息分期!</a>
					</li>
				</ul>
				<ul class="nav_right">
					<li>
						<a href="#">购物车</a>
					</li>
					<li>
						<a href="#">客户服务</a>
					</li>
					<li>
						<a href="#">会员福利</a>

					</li>
					<li>
						<span>|</span>
					</li>
					<li>
						<a href="#">ENGLISH</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="dl_header">
			<div class="w">
				<a href="#">
					<img src="image/logo.png" />
				</a>
			</div>

		</div>
		<div class="dl_content">
			<a href="#" class="dl_img"></a>
			<div class="dl_main">
				<form class="dl_form" method="post" action="denglushujuku.php" novalidate="novalidate">
					<div class="dl_hd">
						<span class="on">会员登录</span>
						<em>|</em>
						<span>扫码登录</span>
					</div>
					<div class="dl_bd">
						<div class="dl_hydl dl_nr" style="display: block;">
							<div class="mobile">
								<input type="text" class="tel" placeholder="手机号码" maxlength="11" name="tel" />
								<span class="sp1">请正确填写手机号码</span>
							</div>
							<div class="possword">
								<input type="password" class="pwd" placeholder="密码" name="pwd" />
								<span class="sp2">请正确填写密码</span>
							</div>
							
							<button>立即登录</button>
							<div>
								<a href="./register.html" target="_blank" class="fl">免费注册</a>
								<a href="#" class="fr">忘记密码</a>
							</div>
							<div class="dl_hydl_ft">
								<a href="javascript:;">手机动态码登录</a>
								<em>|</em>
								<a href="javascript:;">社交登录</a>
							</div>
						</div>
						<div class="dl_cmdl dl_nr" style="display: none;">
							<div class="dl_cmdl_img">
								<img src="img/登录二维码1.png" />
							</div>
							<p>使用<em>万表APP</em>扫码登录<br /><i>在首页顶部搜索栏点击扫一扫</i></p>
							<a href="#">下载万表APP</a>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="footer_bottom">
			<div class="w">
				<div class="footer_bottom_b">
					<p>&copy;万表网名表商城 版权所有 2009-2021 </p>
					<p>广州市万表科技股份有限公司  地址:广州市番禺区番禺大道北16号</p>
					<p>Copyright 2009-2021 WWW.WBIAO.CN.LTD ALL RIGHT RESERVED.</p>
				</div>
			</div>
		</div>
		
		
		<script type="text/javascript">
			// 输入手机号开始

			// 获取元素
			var tel = document.querySelector('.tel');
			var sp1 = document.querySelector('.sp1');

			// 设置正则
			var reg1 = /^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;

			// 点击输入框时
			tel.onclick = function() {
				sp1.innerHTML = ' ';
			}

			// 离开输入框时
			tel.onblur = function() {
				if (reg1.test(this.value)) {
					sp1.style.display = 'none';
				} else {
					sp1.style.display = 'block';
				}
			}
			// 输入手机号结束

			// 密码开始
			// 获取元素
			var pwd = document.querySelector('.pwd');
			var sp2 = document.querySelector('.sp2');

			// 设置正则
			var reg2 = /^\w{6,20}$/;

			// 点击输入框时
			pwd.onclick = function() {
				sp2.style.display = 'none';
			}

			// 离开输入框时
			pwd.onblur = function() {
				if (reg2.test(this.value)) {
					sp2.style.display = 'none';
				} else {
					sp2.style.display = 'block';
				}
			}
			// 密码结束

			// 登录	
			// 获取登录按钮元素
			var btn = document.querySelector('button');

			// 点击按钮时
			btn.onclick = function(event) {
				event.preventDefault();
				// 验证手机号和密码输入是否正确
				if (reg1.test(tel.value) && reg2.test(pwd.value)) {
					// 验证通过，弹出登录成功提示
					alert('登录成功！');
					// 跳转到首页
					window.location.href = './index.html';
				} else {
					// 显示错误提示
					if (!reg1.test(tel.value)) {
						sp1.style.display = 'block';
					}
					if (!reg2.test(pwd.value)) {
						sp2.style.display = 'block';
					}
				}
			}
			// 点击按钮时

			// 登录
		</script>
	</body>
</html>
